<template>
	<view class="container" v-if="isloading">
		<view class="head">
			<u-tabs :list="list" bar-height="4" barWidth="140" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		<view class="body" v-if="current === 0">
			<view class="cell flex-ac flex-b">
				<view class="hd">车次</view>
				<view class="bd">{{transport.tCarNo}}</view>
			</view>
			<view class="cell flex-ac flex-b">
				<view class="hd">状态</view>
				<view class="bd" v-if="transport.status === 0">待接单</view>
				<view class="bd" v-if="transport.status === 1">待发货</view>
				<view class="bd" v-if="transport.status === 2">运输中</view>
				<view class="bd" v-if="transport.status === 3">已到达</view>
				<view class="bd" v-if="transport.status === 4">已完成</view>
				<view class="bd" v-if="transport.status === 5">已取消</view>
			</view>
			<view class="cell flex-ac flex-b">
				<view class="hd">签单状态</view>
				<view class="bd">{{transport.signStatus == 1 ?'已回收': '待回收'}}</view>
			</view>
			<view class="cell flex-ac flex-b">
				<view class="hd">车牌号</view>
				<view class="bd" v-if="transport.tCarJson">{{JSON.parse(transport.tCarJson).carNo || ''}}</view>
			</view>
			<view class="cell flex-ac flex-b">
				<view class="hd">车型</view>
				<view class="bd">{{transport.tCarId || ''}}</view>
			</view>
			<view class="cell flex-ac flex-b">
				<view class="hd">车属单位</view>
				<view class="bd">{{transport.tCarId || ''}}</view>
			</view>
			
			<view class="gap">发货信息</view>
			<view class="cell flex-ac flex-b">
				<view class="hd">整车重量</view>
				<view class="bd">{{transport.totalVehicleWeight || ''}} 吨</view>
			</view>
			<view class="cell flex-ac flex-b">
				<view class="hd">发货数量</view>
				<view class="bd">{{transport.sendNum || ''}} 吨</view>
			</view>
			<view class="cell flex-ac flex-b">
				<view class="hd">装货定位</view>
				<view class="bd" style="width: 70%; text-align: right;">{{order.loadingAddress || ''}}</view>
			</view>
			<view class="cell-image">
				<view class="hd">装货图片</view>
				<u-gap height="30"></u-gap>
				<view class="imageBox flex-wrap">
					<view class="imageItem" v-for="(item,index) in images" :key="index" @click="$Common.viewImage(images, index)">
						<image class="image" :src="item" mode=""></image>
						<image src="../../../static/img/del.png" class="del" @click.stop="delImage(index, 1)" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			
<!-- 			<view class="gap">收货信息</view>
			<view class="cell flex-ac flex-b">
				<view class="hd">收货数量</view>
				<view class="bd">{{transport.orderNum || ''}} 吨</view>
			</view>
			<view class="cell flex-ac flex-b">
				<view class="hd">收货定位</view>
				<view class="bd">{{transport.loadingAddress || ''}}</view>
			</view>
			<view class="cell-image">
				<view class="hd">签单图片</view>
				<u-gap height="30"></u-gap>
				<view class="imageBox flex-wrap">
					<view class="imageItem" v-for="(item,index) in images" :key="index" @click="$Common.viewImage(images, index)">
						<image class="image" :src="item" mode=""></image>
						<image src="../../../static/img/del.png" class="del" @click.stop="delImage(index, 1)" mode="aspectFill"></image>
					</view>
				</view>
			</view> -->
			
			<view class="gap">收货信息</view>
			<view class="cell flex-ac flex-b">
				<view class="hd">收货数量</view>
				<view class="bd">{{transport.receiveNum || ''}} 吨</view>
			</view>
			<view class="cell flex-ac flex-b">
				<view class="hd">收货定位</view>
				<view class="bd">{{order.unloadingAddress || ''}}</view>
			</view>
			<view class="cell-image">
				<view class="hd">签单图片</view>
				<u-gap height="30"></u-gap>
				<view class="imageBox flex-wrap">
					<view class="imageItem" v-for="(item,index) in images" :key="index" @click="$Common.viewImage(images, index)">
						<image class="image" :src="item" mode=""></image>
						<image src="../../../static/img/del.png" class="del" @click.stop="delImage(index, 1)" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			
			<view class="gap">费用信息</view>
			<view class="cell flex-ac flex-b">
				<view class="hd">单价</view>
				<view class="bd">{{transport.price || ''}} 元/吨</view>
			</view>
			<view class="cell flex-ac flex-b">
				<view class="hd">运费金额</view>
				<view class="bd">{{transport.freightAmount || ''}}</view>
			</view>
			<view class="cell flex-ac flex-b">
				<view class="hd">车次实际里程</view>
				<view class="bd">{{transport.actualMileage || ''}}</view>
			</view>
			<view class="cell flex-ac flex-b">
				<view class="hd">车次实际油耗</view>
				<view class="bd">{{transport.oilConsum || ''}}</view>
			</view>
			<view class="cell flex-ac flex-b">
				<view class="hd">油耗金额</view>
				<view class="bd">{{transport.carOilConsumMoney || ''}}</view>
			</view>
			<view class="cell flex-ac flex-b">
				<view class="hd">司机</view>
				<view class="bd">{{transport.driverName || ''}}</view>
			</view>
			<view class="cell flex-ac flex-b">
				<view class="hd">司机工资</view>
				<view class="bd">{{transport.wagesAmount || ''}}</view>
			</view>
			<view class="cell flex-ac flex-b">
				<view class="hd">工资补贴</view>
				<view class="bd">{{transport.allowanceAmount || ''}}</view>
			</view>
			<view class="cell flex-ac flex-b">
				<view class="hd">毛利</view>
				<view class="bd">{{transport.profits || ''}}</view>
			</view>
			<view class="cell flex-ac flex-b">
				<view class="hd">型号</view>
				<view class="bd">{{transport.goodsModel || ''}}</view>
			</view>
			<view class="gap">运输信息</view>
			<view @click="$Jump.Open('./orderMap/orderMap?id=' + id)" class="cell flex-ac flex-b" style="border-bottom: 1rpx solid #eee;">
				<view class="hd">运输轨迹</view>
				<view class="bd" style="color: #1684fc;">查看 ></view>
			</view>
		</view>
	
		<view class="body" v-if="current == 1">
			<view class="box">
				<view class="cell flex-ac flex-b">
					<view class="hd">客户类型</view>
					<view class="md">{{getTypeName(order.customerType)}}</view>
				</view>
				<u-select v-model="show1" mode="single-column" :list="customerType" @confirm="confirmCustomerType" label-name="name" value-name="code" title="选择客户类型" confirm-color='#1674fc'></u-select>
				
				<view class="cell flex-ac flex-b">
					<view class="hd">客户名称</view>
					<view class="md">
						<input type="text" style="pointer-events: none;" v-model="order.customerName" disabled placeholder="-" placeholder-style="color: #cccccc;" />
					</view>
				</view>
			</view>
			
			<view class="dz flex-ac">
				<view style="font-weight: bold;">线路信息</view>
				<!-- <view class="btn" @click="$Jump.Open('./selRouter/selRouter')">选择线路</view> -->
			</view>
			<view class="box">
				<view class="cell flex-ac flex-b">
					<view class="hd">发货人</view>
					<view class="md flex-ac">
						<input type="text" v-model="order.senderName" disabled placeholder="-" placeholder-style="color: #cccccc;" />
					</view>
				</view>
				<view class="cell flex-ac flex-b">
					<view class="hd">发货人电话</view>
					<view class="md flex-ac">
						<input type="number" v-model="order.senderMobile" disabled placeholder="-" placeholder-style="color: #cccccc;" />
					</view>
				</view>
				<view class="cell flex-ac flex-b" @click="$Jump.Open('./map/map?type=1')">
					<view class="hd">装货地址</view>
					<view class="md flex-ac" style="width: 70%;">
						<textarea style="pointer-events: none;" type="text" v-model="order.loadingAddress" disabled auto-height placeholder="请选择" placeholder-style="color: #cccccc;" />
					</view>
				</view>
				<view class="cell flex-ac flex-b">
					<view class="hd">装货电子围栏</view>
					<view class="md flex-ac">
						<input type="number" disabled v-model="order.loadingElectricFence" placeholder="-" placeholder-style="color: #cccccc;" />
					</view>
					<view style="margin-left: 10rpx;">米</view>
				</view>
				<view class="cell flex-ac flex-b">
					<view class="hd">收货人</view>
					<view class="md flex-ac">
						<input type="text" v-model="order.receiverName" disabled placeholder="-" placeholder-style="color: #cccccc;" />
					</view>
				</view>
				<view class="cell flex-ac flex-b">
					<view class="hd">收货人电话</view>
					<view class="md flex-ac">
						<input type="number" v-model="order.receiverMobile" disabled placeholder="-" placeholder-style="color: #cccccc;" />
					</view>
				</view>
				<view class="cell flex-ac flex-b">
					<view class="hd">卸货地址</view>
					<view class="md flex-ac" @click="show3 = true">
						<textarea style="pointer-events: none;" type="text" v-model="order.unloadingAddress" disabled auto-height placeholder="-" placeholder-style="color: #cccccc;" />
					</view>
				 -->
				</view>
				<view class="cell flex-ac flex-b">
					<view class="hd">装货电子围栏</view>
					<view class="md flex-ac">
						<input type="number" v-model="order.unloadingElectricFence" disabled placeholder="-" placeholder-style="color: #cccccc;" />
					</view>
					<view style="margin-left: 10rpx;">米</view>
				</view>
				<view class="cell flex-ac flex-b">
					<view class="hd">里程</view>
					<view class="md flex-ac">
						<input type="text" v-model="order.mileage" disabled placeholder="-" placeholder-style="color: #cccccc;" />
					</view>
					<view style="margin-left: 10rpx;">km</view>
				</view>
				<view class="cell flex-ac flex-b">
					<view class="hd">额定油耗</view>
					<view class="md flex-ac">
						<input type="text" disabled v-model="order.oilConsum" placeholder="-" placeholder-style="color: #cccccc;" />
					</view>
					<view style="margin-left: 10rpx;">元</view>
				</view>
			</view>
			
			<view class="dz flex-ac">
				<view style="font-weight: bold;">货物信息</view>
			</view>
			
			<view class="box">
				<view class="cell flex-ac flex-b">
					<view class="hd">品名</view>
					<view class="md flex-ac">
						<textarea style="pointer-events: none;" type="text" v-model="order.goodsName" disabled auto-height placeholder="-" placeholder-style="color: #cccccc;" />
					</view>
				</view>
				<u-select v-model="show2" mode="single-column" :list="goodsNameList" label-name="name" value-name="id" @confirm="confirmGoodsName" title="选择品名" confirm-color='#1674fc'></u-select>
				<view class="cell flex-ac flex-b">
					<view class="hd">单价</view>
					<view class="md flex-ac">
						<textarea type="text" v-model="order.price" disabled auto-height placeholder="-" placeholder-style="color: #cccccc;" />
					</view>
					<view style="margin-left: 10rpx;">元</view>
				</view>
				<view class="cell flex-ac flex-b">
					<view class="hd">订单数量</view>
					<view class="md flex-ac">
						<input type="text" v-model="order.orderNum" disabled placeholder="-" placeholder-style="color: #cccccc;" />
					</view>
					<view style="margin-left: 10rpx;">吨</view>
				</view>
				<view class="cell flex-ac flex-b">
					<view class="hd">客户要求时间（开始）</view>
					<view class="md" >
						<input type="text" style="pointer-events: none;" v-model="order.requiredTimeBegin" placeholder="-" disabled placeholder-style="color: #cccccc;" />
					</view>
				</view>
				<view class="cell flex-ac flex-b">
					<view class="hd">客户要求时间（结束）</view>
					<view class="md" >
						<input type="text" style="pointer-events: none;" v-model="order.requiredTimeEnd" placeholder="-" disabled placeholder-style="color: #cccccc;" />
					</view>
				</view>
			</view>
			
			<view class="box">
				<view class="cell flex-ac flex-b" style="height: auto;">
					<view class="hd">备注</view>
					<view class="md">
						<view>{{order.remark}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isloading: false,
				id: '',
				order: {},
				transport: {},
				list: [{
					name: '车次详情'
				}, {
					name: '订单详情'
				}],
				current: 0,
				customerType: []
			}
		},
		onLoad(opt) {
			if (opt) {
				console.log('opt:', opt)
				this.id = opt.id
				this.getInfo()
				this.GetCustomerType()
			}
		},
		methods: {
			change(index) {
				this.current = index;
			},
			GetCustomerType(){
				this.$Net.get('/sysDict/code/customer_type').then(res=>{
					console.log('客户类型：', res)
					this.customerType = res.data
				})
			},
			getTypeName(id){
				return this.customerType.find(item=>item.code == id).name || ''
			},
			getInfo(){
				this.$Net.get('/orderTransport/detail/' + this.id).then(res=>{
					console.log('res:', res)
					this.order = res.data.order
					this.transport = res.data.transport
					this.isloading = true
				})
			},
			getDictName(id){
				return this.dict.find(item=>item.code == id).name || ''
			},
			// 获取字典数据
			getDict(){
				this.$Net.get('/sysDict/code/car_type').then(res=>{
					console.log('字典数据:', res)
					this.dict = res.data
					this.getCarList()
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f9f9f9;
	}
</style>

<style lang="scss" scoped>
	@import './orderInfo.scss';
</style>